<template>
  <div >
      <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Home' }">权限管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/rights' }">权限列表</el-breadcrumb-item>
    </el-breadcrumb>
      <div class='main' >
      <template>
        <el-collapse  style="border: none">
          <el-table
            :data="tableData"
            border
            style="width: 100%; margin: 20px 0"
          >
            <el-table-column prop="index" type="index" label="#" width="60">
            </el-table-column>
            <el-table-column prop="authName"  label="权限名称" min-width="180">
            </el-table-column>
            <el-table-column prop="path" label="路径" min-width="180">
            </el-table-column>
            <el-table-column  label="权限"  prop="level"  min-width="230">
              <template  slot-scope="scope" >
                <el-tag :type="scope.row.type" >{{scope.row.level}}</el-tag>
              <!-- <el-tag type="success" v-show="scope.row.level == '二级'" class="baoqian2">{{scope.row.level}}</el-tag>
              <el-tag type="warning" v-show="scope.row.level == '三级'" class="baoqian3">{{scope.row.level}}</el-tag> -->
              </template>
            </el-table-column>
          </el-table>
        </el-collapse>
      </template>
      </div>
  </div>
</template>
<script>
import {JurisDictions} from "../../api/index"
export default {
  name: '',
  data () {
    return {
      tableData:[
        {
          id:1,
          authName:'',
          path:"",
          level:""
        }
      ],
    }
  },
  created(){
    this.getJuri()
  },
  methods: {
   async getJuri(){
     let {data} = await JurisDictions("list");
     this.tableData = data;
    //  console.log(this.tableData);
     this.tableData.filter((item)=>{
       if(item.level == "0"){
         return  item.level = "一级";
       }else if(item.level == "1"){
         return item.level = "二级",item.type = "success";
       }else{
         return item.level = "三级",item.type = "warning"
       }
     });
    }
  }
}
</script>

<style scoped lang='css'>

</style>